<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Order Details</title>
    <link rel="StyleSheet" th:href="@{/css/jpetstore.css}" type="text/css" media="screen"/>
</head>
<body>

<header th:replace="common/top"></header>

<div id="Content">

    <div id="BackLink">
        <!-- 此处的href的链接对应的是controller中的方法 -->
        <a href="/catalog/view">Return to Main Menu</a>
    </div>

    <!--<div id="BackLink">
        <a th:href="@{/order/results}">Return to Order List</a>
    </div>-->

    <h2>Order #<span th:text="${order.orderId}"></span></h2>

    <div class="OrderMeta">
        <div>Order Date: <span th:text="${#dates.format(order.orderDate, 'yyyy-MM-dd HH:mm')}"></span></div>
        <div>Status: <span th:text="${order.status}"></span></div>
    </div>

    <div class="TwoColumnLayout">
        <!-- Billing Address -->
        <div class="AddressSection">
            <h3>Billing Address</h3>
            <div th:text="${order.billToFirstName + ' ' + order.billToLastName}"></div>
            <div th:text="${order.billAddress1}"></div>
            <div th:if="${order.billAddress2}" th:text="${order.billAddress2}"></div>
            <div>
                <span th:text="${order.billCity}"></span>,
                <span th:text="${order.billState}"></span>
                <span th:text="${order.billZip}"></span>
            </div>
            <div th:text="${order.billCountry}"></div>
        </div>

        <!-- Shipping Address -->
        <div class="AddressSection">
            <h3>Shipping Address</h3>
            <div th:text="${order.shipToFirstName + ' ' + order.shipToLastName}"></div>
            <div th:text="${order.shipAddress1}"></div>
            <div th:if="${order.shipAddress2}" th:text="${order.shipAddress2}"></div>
            <div>
                <span th:text="${order.shipCity}"></span>,
                <span th:text="${order.shipState}"></span>
                <span th:text="${order.shipZip}"></span>
            </div>
            <div th:text="${order.shipCountry}"></div>
        </div>
    </div>

    <h3>Order Items</h3>
    <table class="LineItems">
        <thead>
        <tr>
            <th>lineNumber</th>
            <th>itemId</th>
            <th>quantity</th>
            <th>unitPrice</th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${order.lineItems}">
            <td th:text="${item.lineNumber}"></td>
            <td th:text="${item.itemId}"></td>
            <td th:text="${item.quantity}"></td>
            <td th:text="${item.unitPrice}"></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4" class="TotalLabel">Grand Total:</td>
            <td th:text="${#numbers.formatCurrency(order.totalPrice)}"></td>
        </tr>
        </tfoot>
    </table>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>